<template>
  <div class="articleList">
    <el-row>
      <el-col :span="14" style="margin-left:300px">
        <el-button :class="currentSelectIndex === -1 ? 'active' : ''" round @click="getArticleList">最新文章</el-button>
        <el-button v-for="(articleType, index) in articleTypeList" :key="articleType.id" :class="currentSelectIndex === index ? 'active' : ''" round @click="handleClick(articleType.id, index)">{{ articleType.name }}</el-button>
      </el-col>
      <!-- 发布文章 -->
      <el-col :span="6">
        <el-link style="margin-top:10px" icon="el-icon-edit" :underline="false" @click="publishArticle">发布文章</el-link>
        <!-- <el-button type="primary" style="margin-left:50px" @click="publishArticle">发布文章</el-button> -->
      </el-col>
    <!-- 文章列表 -->
    </el-row>
    <el-row style="margin-top:20px;margin-left:145px">
      <Article v-for="article in articleList" :key="article.createTime" :article="article" />
    </el-row>
  </div>
</template>
<script>
import { getArticleTypeList, getArticleByTypeId } from '@/api/article'
import Article from '../article/index_copy.vue'
export default {
  components: { Article },
  data() {
    return {
      articleTypeList: [],
      articleList: [],
      currentDate: new Date(),
      currentSelectIndex: -1
    }
  },
  mounted: function() {
    this.getArticleTypeList()
    this.getArticleList()
  },
  methods: {
    handleClick(id, index) {
      this.currentSelectIndex = index
      getArticleByTypeId({ id: id, pageSize: 6 }).then(res => {
        this.articleList = res.data.list
      })
    },
    // 获取文章类型列表
    getArticleTypeList() {
      getArticleTypeList().then(res => {
        this.articleTypeList = res.data.list
      })
    },
    publishArticle() {
      this.$router.push('/publishArticle')
    },
    getArticleList() {
      this.currentSelectIndex = -1
      getArticleByTypeId({ userId: null, pageSize: 6 }).then(res => {
        console.log(res.data)
        this.articleList = res.data.list
      })
    }
  }
}
</script>
<style scoped>
.articleList {
  margin: 0;
  padding: 0;
  padding-bottom: 50px;
}
.active{
  background: #4E55BA;
  color: #fff;
}
.text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 480px;
    height: 10px;
  }
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }

  .clearfix:after {
      clear: both
  }
</style>
